<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Animated Drop Targets</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Animated Drop Targets</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This example will show you how to make an animated node a Drop target.</p>
</div>

<div class="example newwindow">
    <a href="anim-drop-example.html" target="_blank" class="button">
        View Example in New Window
    </a>
</div>



<h3 id="setting-up-the-html">Setting up the HTML</h3>
<p>First we will create our HTML.</p>

<pre class="code prettyprint">&lt;div id=&quot;dock&quot;&gt;&lt;&#x2F;div&gt;

&lt;div id=&quot;drag&quot;&gt;Drag #1&lt;&#x2F;div&gt;

&lt;div id=&quot;anim1&quot; class=&quot;anim&quot;&gt;Anim #1&lt;&#x2F;div&gt;
&lt;div id=&quot;anim2&quot; class=&quot;anim&quot;&gt;Anim #2&lt;&#x2F;div&gt;
&lt;div id=&quot;anim3&quot; class=&quot;anim&quot;&gt;Anim #3&lt;&#x2F;div&gt;
&lt;div id=&quot;anim4&quot; class=&quot;anim&quot;&gt;Anim #4&lt;&#x2F;div&gt;
&lt;div id=&quot;anim5&quot; class=&quot;anim&quot;&gt;Anim #5&lt;&#x2F;div&gt;</pre>


<p>Now we give that HTML some CSS to make it visible.</p>

<pre class="code prettyprint">.anim {
    position: relative;
    height: 50px;
    width: 100px;
    border: 1px solid black;
    background-color: #00B8BF;
    top: 100px;
}
#drag {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    background-color: #004C6D;
    color: white;
    cursor: move;
    z-index: 5;
}
#dock {
    height: 600px;
    width: 75px;
    background-color: #D00050;
    border: 1px solid black;
    position: absolute;
    top: 5px;
    right: 0px;
}
.anim.yui3-dd-drop-over {
    background-color: #EDFF9F;
}
.anim.done {
    background-color: white;
}
#drag1.yui3-dd-drag-over {
    opacity: .5;
    filter: alpha(opacity=50);
}</pre>


<h3 id="setting-up-the-yui-instance">Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the <code>dd-drop</code>, <code>dd-plugin</code>, <code>dd-drop-plugin</code> and <code>anim</code> modules.</p>

<pre class="code prettyprint">YUI().use(&#x27;dd-drop&#x27;, &#x27;anim&#x27;, &#x27;dd-plugin&#x27;, &#x27;dd-drop-plugin&#x27;);</pre>


<h3 id="making-the-node-draggable">Making the Node draggable</h3>
<p>Now that we have a YUI instance with the modules loaded, we need to instantiate the <code>Drag</code> instance on this Node.</p>
<p>In this example we will be using Node plugins to accomplish our tasks.</p>

<pre class="code prettyprint">YUI().use(&#x27;dd-drop&#x27;, &#x27;anim&#x27;, &#x27;dd-plugin&#x27;, &#x27;dd-drop-plugin&#x27;, function(Y) {
    &#x2F;&#x2F;Get the node #drag
    var d = Y.one(&#x27;#drag&#x27;);
    d.plug(Y.Plugin.Drag, { dragMode: &#x27;intersect&#x27; });
});</pre>


<h3 id="animating-the-nodes">Animating the Nodes</h3>
<p>Now we will set up the Animation sequence that we want to run.</p>

<pre class="code prettyprint">&#x2F;&#x2F;Get all the div&#x27;s with the class anim
var anims = Y.Node.all(&#x27;div.anim&#x27;);
var counter = 0;
anims.each(function(v, k, items) {
    &#x2F;&#x2F;Get a reference to the Node instance
    var a = v; 
    counter++;
    &#x2F;&#x2F;Add the FX plugin
    a.plug(Y.Plugin.NodeFX);
    &#x2F;&#x2F;Add the Drop plugin
    a.plug(Y.Plugin.Drop);

    &#x2F;&#x2F;Set the attributes on the animation
    a.fx.setAttrs({
        from: {
            left: 0
        },
        to: {
            curve: function() {
                var points = [],
                    n = 10;

                for (var i = 0; i &lt; n; ++i) {
                    points.push([
                        Math.floor(Math.random()*Y.DOM.winWidth() - 60 - a.get(&#x27;offsetWidth&#x27;)),
                        Math.floor(Math.random()*Y.DOM.winHeight() - a.get(&#x27;offsetHeight&#x27;))
                    ]);
                }
                return points;
            }
        },
        &#x2F;&#x2F;Do the animation 20 times
        iterations: 20,
        &#x2F;&#x2F;Alternate it so it &quot;bounces&quot; across the screen
        direction: &#x27;alternate&#x27;,
        &#x2F;&#x2F;Give all of them a different duration so we get different speeds.
        duration: ((counter * 1.75) + 1)
    });
});</pre>


<h3 id="making-the-node-a-target">Making the Node a Target</h3>
<p>Using the <code>dd-drop-plugin</code>, we now need to make this animated Node a Drop Target.</p>
<p>To do that, we need to add the plugin after the fx plugin.</p>

<pre class="code prettyprint">&#x2F;&#x2F;Add the FX plugin
a.plug(Y.Plugin.NodeFX);
&#x2F;&#x2F;Add the Drop plugin
a.plug(Y.Plugin.Drop);</pre>


<h3 id="syncing-the-target-with-the-animation">Syncing the Target with the Animation</h3>
<p>The Drop Target needs to be in sync with the animation, since we are changing the height, width, top and left style.</p>
<p>We do this by adding a listener to the <code>tween</code> event on the animation instance.</p>

<pre class="code prettyprint">&#x2F;&#x2F;on tween of the original anim, we need to sync the drop&#x27;s shim.
a.fx.on(&#x27;tween&#x27;, function() {
    &#x2F;&#x2F;Do we have an active Drag?
    if (Y.DD.DDM.activeDrag) {
        &#x2F;&#x2F;Size this shim
        this.drop.sizeShim();
        &#x2F;&#x2F;Force an over target check since we might not be moving the mouse.
        Y.Lang.later(0, a, function() {
            this.drop._handleTargetOver();
        });
    }
}, a);</pre>


<h3 id="full-example-source">Full example source</h3>

<pre class="code prettyprint">YUI().use(&#x27;dd&#x27;, &#x27;dd-plugin&#x27;, &#x27;dd-drop-plugin&#x27;, &#x27;anim&#x27;, function(Y) {
    &#x2F;&#x2F;Get the node #drag
    var d = Y.one(&#x27;#drag&#x27;);
    d.plug(Y.Plugin.Drag, { dragMode: &#x27;intersect&#x27; });
    
    &#x2F;&#x2F;Get all the divs with the class anim
    var anims = Y.Node.all(&#x27;div.anim&#x27;);
    var counter = 0;
    anims.each(function(v, k) {
        &#x2F;&#x2F;Get a reference to the Node instance
        var a = v;
        counter++;
        &#x2F;&#x2F;Add the FX plugin
        a.plug(Y.Plugin.NodeFX);
        &#x2F;&#x2F;Add the Drop plugin
        a.plug(Y.Plugin.Drop);

        &#x2F;&#x2F;Set the attributes on the animation
        a.fx.setAttrs({
            from: {
                left: 0
            },
            to: {
                curve: function() {
                    var points = [],
                        n = 10;

                    for (var i = 0; i &lt; n; ++i) {
                        points.push([
                            Math.floor(Math.random()*Y.DOM.winWidth() - 60 - a.get(&#x27;offsetWidth&#x27;)),
                            Math.floor(Math.random()*Y.DOM.winHeight() - a.get(&#x27;offsetHeight&#x27;))
                        ]);
                    }
                    return points;
                }
            },
            &#x2F;&#x2F;Do the animation 20 times
            iterations: 20,
            &#x2F;&#x2F;Alternate it so it &quot;bounces&quot; across the screen
            direction: &#x27;alternate&#x27;,
            &#x2F;&#x2F;Give all of them a different duration so we get different speeds.
            duration: ((counter * 1.75) + 1)
        });

        &#x2F;&#x2F;When this drop is entered, pause the fx
        a.drop.on(&#x27;drop:enter&#x27;, function() {
            this.fx.pause();
        }, a);
        &#x2F;&#x2F;When the drop is exited, run the fx again
        a.drop.on(&#x27;drop:exit&#x27;, function() {
            this.fx.run();
        }, a);
        &#x2F;&#x2F;When a drop is on the node, do something special
        a.drop.on(&#x27;drop:hit&#x27;, function(e) {
            &#x2F;&#x2F;Stop the animation
            this.fx.stop();
            &#x2F;&#x2F;remove the tween listener
            this.fx.unsubscribeAll(&#x27;tween&#x27;);
            &#x2F;&#x2F;move it to the dock
            this.fx.setAttrs({
                from: {
                    opacity: 1
                },
                to: {
                    height: 50,
                    width: 50,
                    left: function() {
                        var dW = Y.one(&#x27;body&#x27;).get(&#x27;viewportRegion&#x27;).right;
                        return ((dW - 60)); &#x2F;&#x2F;Minus 60 for the dock
                    },
                    top: 15,
                    opacity: .5
                },
                direction: &#x27;normal&#x27;,
                iterations: 1,
                duration: .5,
                &#x2F;&#x2F;We are using reverse above for the &quot;bouncing&quot;, reset it here.
                reverse: false
            });

            &#x2F;&#x2F;On end, add a class and destroy the target
            this.fx.on(&#x27;end&#x27;, function() {
                this.drop.get(&#x27;node&#x27;).addClass(&#x27;done&#x27;);
                this.drop.destroy();
            }, this);
            &#x2F;&#x2F;Run this animation
            this.fx.run();
            
            &#x2F;&#x2F;others that were dropped on.
            Y.each(e.others, function(v, k) {
                var node = v.get(&#x27;node&#x27;);
                node.fx.run();
            });

        }, a);
        
        &#x2F;&#x2F;on tween of the original anim, we need to sync the drop&#x27;s shim.
        a.fx.on(&#x27;tween&#x27;, function() {
            &#x2F;&#x2F;Do we have an active Drag?
            if (Y.DD.DDM.activeDrag) {
                &#x2F;&#x2F;Size this shim
                this.drop.sizeShim();
                &#x2F;&#x2F;Force an over target check since we might not be moving the mouse.
                Y.Lang.later(0, a, function() {
                    this.drop._handleTargetOver();
                });
            }
        }, a);

        a.fx.run();
    });
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#setting-up-the-html">Setting up the HTML</a>
</li>
<li>
<a href="#setting-up-the-yui-instance">Setting up the YUI Instance</a>
</li>
<li>
<a href="#making-the-node-draggable">Making the Node draggable</a>
</li>
<li>
<a href="#animating-the-nodes">Animating the Nodes</a>
</li>
<li>
<a href="#making-the-node-a-target">Making the Node a Target</a>
</li>
<li>
<a href="#syncing-the-target-with-the-animation">Syncing the Target with the Animation</a>
</li>
<li>
<a href="#full-example-source">Full example source</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="A simple drag interaction that doesn&#x27;t require a drop interaction.">
                                        <a href="simple-drag.html">Simple Drag</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to apply the Drag Plugin to a node.">
                                        <a href="drag-plugin.html">Drag - Node plugin</a>
                                    </li>
                                
                            
                                
                                    <li data-description="A simple proxy drag interaction that doesn&#x27;t require a drop interaction.">
                                        <a href="proxy-drag.html">Drag - Proxy</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to constrain a draggable Node to another Node&#x27;s region.">
                                        <a href="constrained-drag.html">Drag - Constrained to a Region</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using interaction groups, this example demonstrates how to tie into the Drag &amp; Drop Utility&#x27;s interesting moments to provide visual affordances for the current drag operation.">
                                        <a href="groups-drag.html">Drag - Interaction Groups</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The use of the drag shim when dragging nodes over other troublesome nodes.">
                                        <a href="shim-drag.html">Using the Drag Shim</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use the Drop Target events to code your application.">
                                        <a href="drop-code.html">Using Drop Based Coding</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag.">
                                        <a href="winscroll.html">Window Scrolling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items.">
                                        <a href="delegate.html">Drag Delegation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.">
                                        <a href="delegate-drop.html">Drag Delegation with a Drop Target</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use Drag plugins with a DD Delegate based solution.">
                                        <a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling.">
                                        <a href="list-drag.html">List Reorder w/Bubbling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.">
                                        <a href="scroll-list.html">List Reorder w/Scrolling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to make an animated node a Drop target.">
                                        <a href="anim-drop.html">Animated Drop Targets</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
                                        <a href="portal-drag.html">Portal Style Example</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
